<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物料组成设计单变更页面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-table.min.css">
    <script src="../js/jquery-2.1.1.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js" ></script>
    <script>


        $(function() {

            //页面初始化给设计人赋值
            $.ajax({
                type: 'POST',
                url: '/userShow.action',
                success: function (user) {
                    $('#changer').val(user.loginId);
                }
            });



            //I,II,III级编号联动
            var iNum1;
            var iNum2;
            var aProvince = ["电子", "机械", "商品"];
            var aCity = [["计算机", "手机", "平板", "手表"],
                ["焊接器", "液压器"],
                ["学习用品", "生活用品"]];
            var aCountry = [[
                ["cpu", "gpu", "内存条", "固态硬盘", "网卡"],
                ["处理器", "显示器"],
                ["触摸屏", "接口"],
                ["表芯", "表带"],
            ],
                [
                    ["燃烧带", "焊锡", "焊接头"],
                    ["起重器", "铁块"]
                ],
                [
                    ["钢笔"],
                    ["枕头", "被子", "毛巾", "牙膏"]
                ]];


            for (var i = 0; i < aProvince.length; i++) {
                $('#SfirstKindName').append('<option>' + aProvince[i] + '</option>');
            }
            ;
            $('#SfirstKindName').change(function () {
                $('#SsecondKindName').children().not(':eq(0)').remove();
                $('#SthirdKindName').children().not(':eq(0)').remove();
                iNum1 = $(this).children('option:selected').index();
                var aaCity = aCity[iNum1 - 1];
                for (var j = 0; j < aaCity.length; j++) {
                    $('#SsecondKindName').append('<option>' + aaCity[j] + '</option>');
                }
            });
            $('#SsecondKindName').change(function () {
                $('#SthirdKindName').children().not(':eq(0)').remove();
                iNum2 = $(this).children('option:selected').index();
                var aaCountry = aCountry[iNum1 - 1][iNum2 - 1];
                for (var k = 0; k < aaCountry.length; k++) {
                    $('#SthirdKindName').append('<option>' + aaCountry[k] + '</option>');
                }
            })

            for (var i = 0; i < aProvince.length; i++) {
                $('#firstKindName').append('<option>' + aProvince[i] + '</option>');
            }
            ;
            $('#firstKindName').change(function () {
                $('#secondKindName').children().not(':eq(0)').remove();
                $('#thirdKindName').children().not(':eq(0)').remove();
                iNum1 = $(this).children('option:selected').index();
                var aaCity = aCity[iNum1 - 1];
                for (var j = 0; j < aaCity.length; j++) {
                    $('#secondKindName').append('<option>' + aaCity[j] + '</option>');
                }
            });
            $('#secondKindName').change(function () {
                $('#thirdKindName').children().not(':eq(0)').remove();
                iNum2 = $(this).children('option:selected').index();
                var aaCountry = aCountry[iNum1 - 1][iNum2 - 1];
                for (var k = 0; k < aaCountry.length; k++) {
                    $('#thirdKindName').append('<option>' + aaCountry[k] + '</option>');
                }
            })


            //页面加载完初始化表格数据
            $('#table').bootstrapTable({
                //请求方式  get请求中文会乱码，建议使用post请求
                method: 'get',
                //请求头部的设置
                contentType: 'application/json;charset=utf-8',
                //路径
                url: '/QueryNotApprovedProducts.action',
                //设置交替行样式
                striped: true,
                //初始显示页号
                pageNumber: 1,
                //设置表格高度
                height: 500,

                //是否显示分页
                pagination: true,
                //设置是服务端分页还是客户端分页
                sidePagination: 'server',
                //页大小
                pageSize: 5,
                //分页列表
                pageList: [3, 5, 6, 10],
                //上传到服务端的参数
                queryParams: function (params) {
                    return {
                        // 计算页号(当前页)
                        pageNum: (params.offset / params.limit) + 1,
                        // 计算页大小
                        pageSize: params.limit,

                        productId: $('#SproductId').val(),
                        productName: $('#SproductName').val(),
                        firstKindName: $('#SfirstKindName').val(),
                        secondKindName: $('#SsecondKindName').val(),
                        thirdKindName: $('#SthirdKindName').val(),
                        checkTag:'S001-1',
                        //changeTag:'B002-0'

                    };
                },
                // 定义列名
                columns: [
                    {title: '设计单编号', field: 'designId', align: 'center'},
                    {title: '产品编号', field: 'productId', align: 'center'},
                    {title: '产品名称', field: 'productName', align: 'center'},
                    {title: '设计人', field: 'designer', align: 'center'},
                    {title: '登记时间', field: 'registerTime', align: 'center'},
                    {title: '物料总成本', field: 'costPriceSum', align: 'center'},
                    {
                        title: '操作', field: 'id', align: 'center',
                        formatter: function (value, row, index) {
                            var btn = "<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#myModal' onclick='queryProductProfile(" + JSON.stringify(row) + ")'>变更</button>";
                            return btn;
                        }
                    },
                ]

            });



            //点击查询按钮后刷新表,并清空搜索条件
            $('#searchProduct').click(function () {
                $("#table").bootstrapTable("refresh");
                $('#SproductId').val('');
                $('#SproductName').val('');
                $('#SfirstKindName').val('');
                $('#SsecondKindName').val('');
                $('#SthirdKindName').val('');

            });

            //物料序号
            var detailsNumberCount;
            var detailsNumberCount1;

            //产品物料未变更的id
            let checkedIdList="";

            var checkedId="";

            //点击变更按钮后将当前产品信息展示到模态框上
            queryProductProfile = function (a) {

                $('#product').children().remove();
                $('#parent_id').val(a.id);
                $('#SpanProductId').text(a.productId);
                $('#SpanProductName').text(a.productName);
                $('#person').text(a.register);
                $('#time').text(a.registerTime);
                $('#moduleDescribe').text(a.moduleDescribe);
                $('#designer').val(a.designer);
                $('#ModuleName').text(a.productName);
                $('#ModuleName1').text(a.productName);
                $.ajax({
                    type: 'post',
                    url: '/QueryDModuleDetails.action',
                    contentType: 'application/json;charset=utf-8',
                    data: $('#parent_id').val(),
                    success: function (a) {

                        if(a.length>0){

                            $('#tag').val(1);
                            for (var i = 0; i < a.length; i++) {

                                detailsNumberCount=Number(a[i].detailsNumber);

                                checkedIdList+="&checkedIdJson="+a[i].detailsNumber;

                                checkedId+=a[i].detailsNumber+",";

                                $('#product').append(
                                    "<tr><td><input type='checkbox' checked='checked' value='" + a[i].id + "'>" +
                                    "</td><td>"
                                    + a[i].detailsNumber +
                                    "</td><td>"
                                    + a[i].productId +
                                    "</td><td>"
                                    + a[i].productName +
                                    "</td><td>"
                                    + "物料" +
                                    "</td><td>"
                                    + a[i].productDescribe +
                                    "</td><td><input type='text' style='width: 50px' onchange='CalculateTheTotalPrice(this)' value='"+a[i].amount+"'>" + "</td><td>"
                                    + a[i].amountUnit +
                                    "</td><td>"
                                    + "<input type='text' value='" + a[i].costPrice + "' readonly='readonly' style='width:70px;height:38px;background-color:whitesmoke '>" +
                                    "</td><td>"
                                    + "<input type='text' readonly='readonly' style='width: 60px' value='"+a[i].subtotal+"'>" +
                                    "</td></tr>"
                                )


                            }
                        }else {
                            detailsNumberCount=0;
                            $('#tag').val(0);
                        }
                        }


                })


            }




            //点击添加物料按钮后将所有物料信息展示到模态框上
            $('#showMaterialBtn').click(function () {

                //点击按钮后创建bootstrapTable
                $('#DFileWithWuliao').bootstrapTable({
                    //请求方式  get请求中文会乱码，建议使用post请求
                    method: 'get',
                    //请求头部的设置
                    contentType: 'application/json;charset=utf-8',
                    //路径
                    url: '/QueryMaterialsToBeDevelopedProduct.action',
                    //设置交替行样式
                    striped: true,
                    //初始显示页号
                    pageNumber: 1,
                    //设置表格高度
                    height: 650,
                    //是否显示分页
                    pagination: true,
                    //设置是服务端分页还是客户端分页
                    sidePagination: 'server',
                    //页大小
                    pageSize: 5,
                    //分页列表
                    pageList: [3, 5, 6, 10],
                    //上传到服务端的参数
                    queryParams: function (params) {
                        return {
                            // 计算页号(当前页)
                            pageNum: (params.offset / params.limit) + 1,
                            // 计算页大小
                            pageSize: params.limit,
                            //审核标志为已通过
                            checkTag:'S001-1',
                            //类型为物料
                            type:'Y001-2'
                        };
                    },
                    // 定义列名
                    columns: [
                        {title: '物料编号', field: 'productId', align: 'center'},
                        {title: '物料名称', field: 'productName', align: 'center'},
                        {
                            title: '用途类型', field: 'type', align: 'center',
                            formatter: function (value) {
                                if (value == 'Y001-1') {
                                    return '商品';
                                }
                                if (value == 'Y001-2') {
                                    return '物料';
                                }
                            }
                        },
                        {title: '物料描述', field: 'productDescribe', align: 'center'},
                        {title: '单位', field: 'personalUnit', align: 'center'},
                        {title: '计划成本单价', field: 'costPrice', align: 'center'},
                        {
                            title: '操作', field: 'id', align: 'center',
                            formatter: function (value, row, index) {
                                var btn = "<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#myModal2' onclick='addProductProfile(" + JSON.stringify(row) + ")'>添加</button>";
                                return btn;
                            }
                        },
                    ]

                });



            });

            //点击添加按钮后将当前产品物料信息添加到到模态框上
            addProductProfile = function (a) {

                //$('#parent_id')


                detailsNumberCount1 = detailsNumberCount += 1;

                if ($("#tag").val()==0) {

                    $('#tag').val(1);
                    $('#product').append(
                        "<tr><td><input type='checkbox' checked='true' value='" + a.id + "'>" +
                        "</td><td>"
                        + "1" +
                        "</td><td>"
                        + a.productId +
                        "</td><td>"
                        + a.productName +
                        "</td><td>"
                        + "物料" +
                        "</td><td>"
                        + a.productDescribe +
                        "</td><td><input type='text' style='width: 50px' onchange='CalculateTheTotalPrice(this)'>" + "</td><td>"
                        + a.personalUnit +
                        "</td><td>"
                        + "<input type='text' value='" + a.costPrice + "' readonly='readonly' style='width:70px;height:38px;background-color:whitesmoke '>" +
                        "</td><td>"
                        + "<input type='text' readonly='readonly' style='width: 60px'>" +
                        "</td><td style='display: none'>"
                        +"<input type='text' value='"+a.residualAmount+"'  style='display: none'>"+
                        "</td></tr>"
                    )
                }else {

                    $('#product').append(
                        "<tr><td><input type='checkbox' checked='true' value='" + a.id + "'>" +
                        "</td><td>"
                        + detailsNumberCount1 +
                        "</td><td>"
                        + a.productId +
                        "</td><td>"
                        + a.productName +
                        "</td><td>"
                        + "物料" +
                        "</td><td>"
                        + a.productDescribe +
                        "</td><td><input type='text' style='width: 50px' onchange='CalculateTheTotalPrice(this)'>" + "</td><td>"
                        + a.personalUnit +
                        "</td><td>"
                        + "<input type='text' value='" + a.costPrice + "' readonly='readonly' style='width:70px;height:38px;background-color:whitesmoke '>" +
                        "</td><td>"
                        + "<input type='text' readonly='readonly' style='width: 60px'>" +
                        "</td><td style='display: none'>"
                        +"<input type='text' value='"+a.residualAmount+"'  style='display: none'>"+
                        "</td></tr>"
                    )
                }



            }



            //改变数量后计算小计
            CalculateTheTotalPrice = function (a) {

                //数量
                var count=$(a).val();

                //单价
                var costPrice=$(a).parent("td").parent("tr").children("td").eq(8).children("input").val();

                //小计
                $(a).parent("td").parent("tr").children("td").eq(9).children("input").val(count*costPrice);


            }

            //点击删除按钮后删除物料
            $('#showDeleteBtn').click(function () {

                if($("#product input[type='checkbox']:checked").length==0){

                    alert("请至少选择一项物料进行删除");

                }else {

                    $("#product input[type='checkbox']").each(function () {

                        if($(this).prop("checked")){
                            $(this).parent().parent().remove();

                        }
                    });
                }

            });

            //点击提交按钮后执行变更物料的异步方法(添加删除一起)
            $('#saveMaterialBtn').click(function () {

                //页面初始化给创建时间赋值
                var date = new Date();
                $('#changeTime').val(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());

                let trDataList = [];

                let falseCheckedIdList="";
                var costPriceSum=0;
                $("#product input[type='checkbox']").each(function (i,value) {

                    if($(this).prop('checked')==false){

                        falseCheckedIdList+="&falseCheckedIdList="+$(this).parent().next().text();


                    }else {


                                //每行的数据
                                let trData={};

                                trData.checkedId=checkedId;

                                //id
                                trData.id=$(this).parent().next().text();

                                //父级序号
                                trData.parentId=$('#parent_id').val();

                               //可用数量
                               trData.residualAmount=$(this).parent("td").parent("tr").parent().children("tr").eq(i).children("td").eq(6).children("input").val();


                                //物料序号
                                trData.detailsNumber=$(this).parent("td").parent("tr").parent().children("tr").eq(i).children("td").eq(1).text();



                                //物料编号
                                trData.productId=$(this).parent("td").parent("tr").parent().children("tr").eq(i).children("td").eq(2).text();




                                //物料名称
                                trData.productName=$(this).parent("td").parent("tr").parent().children("tr").eq(i).children("td").eq(3).text();

                                //用途类型
                                trData.type='Y001-2';



                                //描述
                                trData.productDescribe=$(this).parent("td").parent("tr").parent().children("tr").eq(i).children("td").eq(5).text();

                                //数量
                                trData.amount=$(this).parent("td").parent("tr").parent().children("tr").eq(i).children("td").eq(6).children("input").val();

                                //单位
                                trData.amountUnit=$(this).parent("td").parent("tr").parent().children("tr").eq(i).children("td").eq(7).text();

                                //计划产品单价
                                trData.costPrice=$(this).parent("td").parent("tr").parent().children("tr").eq(i).children("td").eq(8).children("input").val();

                                //小计
                                trData.subtotal=$(this).parent("td").parent("tr").parent().children("tr").eq(i).children("td").eq(9).children("input").val();


                                trData.changer=$('#changer').val();

                                trData.changeTime=$('#changeTime').val();

                                trData.moduleDescribe=$('#moduleDescribe').val();


                                //计算总物料成本
                                costPriceSum=costPriceSum+parseInt($(this).parent("td").parent("tr").parent().children("tr").eq(i).children("td").eq(9).children("input").val());
                                $('#costPriceSum').val(costPriceSum);

                                trData.costPriceSum=costPriceSum;


                                trDataList.push(trData);



                          }





                    });
                //批量删除方法
                $.ajax({
                    type: 'post',
                    url: '/deleteModuleByDetailsNumber.action',
                    data: 'id=' + $('#parent_id').val() + checkedIdList+falseCheckedIdList,
                    success: function () {
                        $("#table").bootstrapTable("refresh");
                    }

                });
                //批量添加或修改
                var trDataListJson = JSON.stringify(trDataList);

                $.ajax({
                    type: 'post',
                    url: '/batchSaveDesignModuleDetails.action',
                    contentType: 'application/json;charset=utf-8',
                    data: trDataListJson,
                    success:function () {
                        $("#table").bootstrapTable("refresh");
                    }

                });


















            });
        });














    </script>
</head>
<body>
<div class="modal fade m-auto" id="myModal">
    <div class="modal-dialog modal-xl" style="width: 1000px;height: 800px">
        <div class="modal-content">

            <!--     制作设计单模态框       -->
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">物料组成设计单</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">

                <div class="m-auto row">
                    <div class="col-md-4 offset-md-9">
                        <button class="btn btn-success" id="showMaterialBtn" data-toggle="modal" data-target="#myModal2">添加物料</button>
                        <button class="btn btn-danger" id="showDeleteBtn">删除物料</button>
                    </div>
                </div>

                <div class="m-auto row">
                    <div class="col"><span>产品名称:</span><span id="SpanProductName" style="color: #3fc3ee;"></span></div>
                    <div class="col"><span>产品编号:</span><span id="SpanProductId" style="color: #3fc3ee;"></span></div>
                </div>
                <div class="m-auto row" style="padding-top: 15px">
                    <span class="col-2">设计人:</span><input id="designer"
                                                          style="color: #3fc3ee;border: 0px;outline: none;border-bottom:1px solid black"
                                                          class="col-3">
                </div>
                <div style="padding-top: 15px">
                    <table id="tab1" class="table table-striped table-bordered table-hover">
                        <thead style="background-color: #aeaeae;border: 1px solid black">
                        <tr>
                            <th>点选</th>
                            <th>物料序号</th>
                            <th>物料编号</th>
                            <th>物料名称</th>
                            <th>用途类型</th>
                            <th>描述</th>
                            <th>数量</th>
                            <th>单位</th>
                            <th>计划成本单价(元)</th>
                            <th>小计(元)</th>
                        </tr>
                        </thead>
                        <tbody id="product">

                        </tbody>
                    </table>
                </div>
                <div class="m-auto row" style="padding-top: 15px">
                    <div>
                        <span class="col-6">登记人:<span id="person" style="color: #3fc3ee;"></span></span>
                        <span class="col-6">登记时间:<span id="time" style="color: #3fc3ee;"></span></span>
                    </div>
                </div>
                <div class="row m-auto" style="padding-top: 15px">
                    <span class="col-3">设计要求:</span><textarea id="moduleDescribe"
                                                              style="width: 500px; height: 100px;"></textarea>
                </div>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" id="saveMaterialBtn" class="btn btn-success" data-toggle="modal" data-target="#myModal">提交</button>
                <button type="button" class="btn btn-danger"  data-toggle="modal" data-target="#myModal">关闭</button>
            </div>


        </div>
    </div>
</div>



<!--模糊查询 -->
<div class="form-inline breadcrumb" style="width: 90%;background-color: white;">
    <label class="mb-2 mr-sm-2">产品编号</label><input type="text" class="form-control" style="width: 180px" id="SproductId">
    <label class="mb-2 mr-sm-2">产品名称</label><input type="text" class="form-control" id="SproductName" style="width: 180px">
    <label class="mb-2 mr-sm-2">I级分类</label>
    <select class="form-control mb-2 mr-sm-2" id="SfirstKindName">
        <option value="">--请选择--</option>
    </select>

    <label class="mb-2 mr-sm-2">II级分类</label>
    <select class="form-control mb-2 mr-sm-2" id="SsecondKindName">
        <option value="">--请选择--</option>
    </select>

    <label class="mb-2 mr-sm-2">III级分类</label>
    <select class="form-control mb-2 mr-sm-2" id="SthirdKindName">
        <option value="">--请选择--</option>
    </select>

    <button class='btn btn-success' id="searchProduct">搜索</button>
</div>

<!-- 物料设计添加模态框 -->
<div class="modal fade" id="myModal2">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">物料组成设计</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <table id="DFileWithWuliao">

                </table>
            </div>
        </div>
    </div>
</div>

<table id="table"></table>


<!--I级分类 -->
<input type="text" id="firstKindName" style="display: none">

<!--II级分类 -->
<input type="text" id="secondKindName" style="display: none">

<!--III级分类 -->
<input type="text" id="thirdKindName" style="display: none">

<!--物料总成本 -->
<input type="text" id="costPriceSum" style="display: none">

<input type="text" id="parent_id" style="display: none">

<input type="text" id="detailsNumber" value="0" style="display: none">

<input type="text" id="tag" value="0" style="display: none">

<input type="text" id="changer" value="0" style="display: none">

<input type="text" id="changeTime" value="0" style="display: none">














</body>

</html>